<template>
	<view class="content">
		<view class="button-wrap" :style="{background:background}" @click="handleClick">
			<view class="loading"><u-loading mode="flower" :show="loading"></u-loading></view><view class="text">{{loading?loadingText:text}}</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'CustomButton',
	data() {
		return {
		};
	},
	props: {
		text: {
			type: String,
			default: ''
		},
		loading:{
			type:Boolean,
			default:false
		},
		loadingText: {
			type: String,
			default: '提交中...'
		},
		background:{
			type: String,
			default: '#0da297'
		}
	},
	methods:{
		handleClick(){
			this.$u.debounce(this._click,this.$debounceTime,true)
			
		},
		_click(){
			this.$emit('click');
		}
		
	}
};
</script>

<style lang="scss" scoped>
	.button-wrap{
		text-align: center;
		font-size: 30rpx;
		padding:30rpx 0;
		color:#fff;
		min-width:200rpx;
		
	}
	.loading{
		padding-right: 10rpx;
	}
	.text,.loading{
		display: inline-block;
		vertical-align: middle;
	}
	</style>
